<!--
* @description 参数1
* @fileName 01.vue模板
* @author userName
* @date 2024-01-22 09:02:04
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01.vue模板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <!-- 
        项目模式： 
           MVC(model view controller): 前后端不分离
           MVVM(model view vm【vue】):
     -->
     <!-- 该视图通过id 被vue管理 -->
    <div id="app">
        {{msg}}
        <hr>
        <div v-text="msg"></div>
        <hr>
        <!-- <button v-on:click="handlerChangeMsg">修改msg</button> -->
        <hr>
        <!-- 
            @事件类型=事件名
            事件参数：$event/event 全局变量 事件参数
         -->
        <button @click="handlerChangeMsg">修改msg</button>
        <hr>
        <button @click="handlerChangeMsg02(1,2)">传递参数</button>
        <hr>
        <button @click="handlerChangeMsg03(1,2,$event)">传递事件参数</button>
        <hr>
        <button @click="handlerChangeMsg04(1,2)">传递事件参数2</button>
        <hr>
        <a href="http://www.baidu.com" @click.prevent="handlerToNewPage">百度</a>
        <hr>
        <div  @click="handlerParent" style="width: 500px;height: 500px;background-color: red;">
            <div  @click.stop="handlerFather" style=" width: 300px;height: 300px;background-color: green;">
                <a  @click.stop.prevent="handlerSon" href="http://www.baidu.com" style="display: block;width: 100px;height: 100px;background-color: yellow;">
                </a>
            </div>
        </div>
    </div>

    <script>
        /**
         *  stopPropagation 取消冒泡
         *  preventDefault  取消默认行为
         *  事件与事件修饰符
         *     @事件类型  @click @mouseover @mouseout  @submit @blur @fouce @change ...
         *     @事件类型.事件修饰符
         */
        // 
        // 创建vue对象
        const vm = new Vue({
            // 数据模型  直接挂载到vue对象中
            data:{
                msg:"hello vue!"
            },
            // 事件绑定
            methods:{
                // 方法中 this 指向vue的实例对象
                handlerChangeMsg(e) {
                    console.log(e);
                    //console.log(this);
                    this.msg = "hello web44!"
                },
                handlerChangeMsg02(a,b) {
                    console.log(a,b);
                },
                handlerChangeMsg03(a,b,e) {
                    console.log(a,b,e);
                },
                handlerChangeMsg04(a,b) {
                    console.log(a,b,event);
                },
                handlerToNewPage(e) {
                    // e.preventDefault()  // 取消默认行为
                    console.log("我要跳转了。。", e);
                },
                handlerParent(e) {
                    console.log("祖父级....");
                },
                handlerFather(e) {
                   // e.stopPropagation()
                    console.log("父级....");
                },
                handlerSon(e) {
                   // e.stopPropagation()
                    this._myfunction()
                    console.log("子集....");
                },
                _myfunction() {
                    console.log("我是一个自定义函数...");
                }
            }
        });
        vm.$mount("#app")
        // 当data一旦发生变化  视图就会发生改变
    </script>
</body>

</html>